import React, { Component, useState } from "react";
import RoleContent from "@/views/AuthManage/RoleManage/RoleContent";
import RoleSide from "@/views/AuthManage/RoleManage/RoleSide";
import { RecordDetail } from "@/views/AuthManage/RoleManage/type";
import "./index.less";

const RoleManage = () => {
	const [selRoleId, setSelRoleId] = useState<React.Key>();
	const [editDetail, setEditDetail] = useState<RecordDetail>();

	const handleSelect = (keys: React.Key[]) => {
		setSelRoleId(keys[0]);
	};

	const handleEdit = (value: RecordDetail) => {
		setEditDetail({ ...value });
	};

	return (
		<div className="role-manage startStretch card">
			<RoleSide editDetail={editDetail} onSelect={handleSelect}></RoleSide>
			<RoleContent roleId={selRoleId} onEdit={handleEdit}></RoleContent>
		</div>
	);
};

export default RoleManage;
